<template>
  <nav 
    class="scroll-navigation fixed top-0 left-0 right-0 z-50 transition-all duration-300"
    :class="[
      isScrolled ? 'bg-white shadow-lg' : 'bg-transparent',
      isVisible ? 'translate-y-0' : '-translate-y-full'
    ]"
    ref="navRef"
  >
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- Logo with animation -->
        <div class="logo-container flex items-center" ref="logoRef">
          <div class="medical-logo w-10 h-10 mr-3 relative" ref="logoIconRef">
            <div class="absolute inset-0 bg-gradient-to-br from-red-500 to-red-600 rounded-lg flex items-center justify-center">
              <div class="medical-cross-small">
                <div class="w-6 h-1 bg-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
                <div class="w-1 h-6 bg-white absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
              </div>
            </div>
          </div>
          <span 
            class="logo-text font-bold text-xl transition-colors duration-300"
            :class="isScrolled ? 'text-gray-800' : 'text-white'"
            ref="logoTextRef"
          >
            药品商城
          </span>
        </div>

        <!-- Navigation items -->
        <div class="nav-items hidden md:flex items-center space-x-8" ref="navItemsRef">
          <a 
            v-for="(item, index) in navItems" 
            :key="item.id"
            :href="item.href"
            class="nav-item relative px-3 py-2 rounded-md text-sm font-medium transition-all duration-300"
            :class="[
              isScrolled ? 'text-gray-600 hover:text-red-600' : 'text-white hover:text-red-200',
              activeItem === item.id ? 'active' : ''
            ]"
            @click.prevent="handleNavClick(item)"
            :ref="el => { if (el) navItemElements[index] = el as HTMLElement }"
          >
            {{ item.label }}
            <div class="nav-indicator absolute bottom-0 left-0 w-full h-0.5 bg-red-500 transform scale-x-0 transition-transform duration-300"></div>
          </a>
        </div>
      </div>
    </div>
  </nav>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted, nextTick } from 'vue'
import { gsap } from 'gsap'

interface NavItem {
  id: string
  label: string
  href: string
}

const navItems = ref<NavItem[]>([
  { id: 'home', label: '首页', href: '#home' },
  { id: 'products', label: '商品', href: '#products' },
  { id: 'categories', label: '分类', href: '#categories' },
  { id: 'brands', label: '品牌', href: '#brands' }
])

// Template refs
const navRef = ref<HTMLElement | null>(null)
const logoRef = ref<HTMLElement | null>(null)
const logoIconRef = ref<HTMLElement | null>(null)
const logoTextRef = ref<HTMLElement | null>(null)
const navItemsRef = ref<HTMLElement | null>(null)
const navItemElements = ref<HTMLElement[]>([])

// Reactive data
const isScrolled = ref(false)
const isVisible = ref(true)
const activeItem = ref('')

// Animation instances
let navAnimations: gsap.core.Timeline[] = []
let lastScrollY = 0

function handleScroll() {
  const currentScrollY = window.scrollY
  
  // Update scroll state
  isScrolled.value = currentScrollY > 50
  
  // Hide/show nav based on scroll direction
  if (currentScrollY > lastScrollY && currentScrollY > 100) {
    isVisible.value = false
  } else {
    isVisible.value = true
  }
  
  lastScrollY = currentScrollY
}

function handleNavClick(item: NavItem) {
  activeItem.value = item.id
  
  // Smooth scroll to section
  const element = document.querySelector(item.href)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

function setupAnimations() {
  if (!navRef.value) return

  // Initial nav entrance animation
  const entranceTimeline = gsap.timeline()
  
  // Logo animation
  if (logoRef.value) {
    entranceTimeline.from(logoIconRef.value, {
      scale: 0,
      rotation: -180,
      duration: 0.8,
      ease: "back.out(1.7)"
    })
    .from(logoTextRef.value, {
      opacity: 0,
      x: -20,
      duration: 0.6,
      ease: "power2.out"
    }, "-=0.4")
  }

  // Nav items stagger animation
  if (navItemElements.value.length > 0) {
    entranceTimeline.from(navItemElements.value, {
      opacity: 0,
      y: -20,
      duration: 0.5,
      stagger: 0.1,
      ease: "power2.out"
    }, "-=0.3")
  }

  navAnimations.push(entranceTimeline)
}

onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
  
  nextTick(() => {
    setupAnimations()
  })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
  navAnimations.forEach(anim => anim.kill())
})
</script>

<style scoped>
.scroll-navigation {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.medical-cross-small {
  position: relative;
  width: 100%;
  height: 100%;
}

.nav-item.active .nav-indicator {
  transform: scaleX(1);
}

.nav-item:hover .nav-indicator {
  transform: scaleX(1);
}

.nav-item {
  position: relative;
  overflow: hidden;
}

.nav-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(239, 68, 68, 0.1), transparent);
  transition: left 0.5s;
}

.nav-item:hover::before {
  left: 100%;
}

.medical-logo:hover .medical-cross-small {
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}
</style> 
